<template>
  <el-container>
    <!-- 头部区域 -->
    <el-header style="height:70px">
      <div class="header-main"  @click="ab()">
        <img src="@/assets/images/cmlogo.png" />
        <tabbar></tabbar>
        <input
          value="音乐/视频/电台/用户"
          placeholder="   音乐/视频/电台/用户"
          type="text"
          style="width:158px;height:32px;"
          class="homeinput"
          v-model="inputValue"
          @keyup.enter="toResult"
        />

        <!-- <span
          style="color:#fff;width:40px;height:100%;line-height:100px;margin-left:30px"
          v-if="ifk == 1"
        >
          <el-avatar> <img :src="this.kkimg" alt=""/>
          </el-avatar
        ></span> -->
        <el-row class="block-col-2" style="line-height:100px;margin-left:30px" v-if="ifk == 1">
          <el-col>
            <el-dropdown @command="handleCommand">
              <span class="el-dropdown-link">
                <el-avatar> <img :src="this.kkimg" alt="" /> </el-avatar>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item >我的音乐</el-dropdown-item>
                <el-dropdown-item command="e">退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </el-row>
      </div>
    </el-header>
  </el-container>
</template>

<script>
import tabbar from "../tabbar/tabbar.vue";
import axios from "axios";
export default {
  components: { tabbar },
  name: "Home",
  data() {
    return {
      //输入的内容
      inputValue: "",
      kkimg: "",
    };
  },
  methods: {
    ab(){
      this.kkk()
    },
    toResult() {
      //非空判断
      if (this.inputValue == "") {
        this.$message.warning("请输入内容");
      } else {
        //去搜索页 携带数据
        this.$router.push("/result?q=" + this.inputValue);
        location.reload();
      }
    },
     handleCommand(command) {

         window.sessionStorage.clear()
      this.$router.push('/discover')
        location.reload()
      this.ifk=!ifk
     
      },
     exit(){
      window.sessionStorage.clear()
      this.$router.push('/discover')
    }
  },
  created() {
    axios({
      url: "http://localhost:3000/user/account",
      method: "get",
      params: {
        cookie: window.sessionStorage.cookie,
      },
    }).then((res) => {
      console.log(res);

      this.kkimg = res.data.profile.avatarUrl;
    });
    if (window.sessionStorage.cookie) {
      this.ifk = 1;
    } else {
      this.ifk = 0;
    }
  },
 
};
</script>

<style>
.homeinput {
  margin-top: 20px;
  margin-left: 70px;
  border-radius: 16px;
  font-size: 8px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
  height: 680px;
}
.el-header {
  background-color: rgb(36, 36, 36);
  color: #333;
  text-align: center;
  height: 70px;
}
.header-main {
  display: flex;
  width: 1100px;
  height: 70px;
  margin: 0 auto;
}
.header-main img {
  height: 70px;
}
.el-tabs {
  /* height: 70px; */
  width: 500px;
}
.el-tab-pane {
  color: rgb(255, 255, 255);
  /* line-height: 70px; */
}
</style>
